Lås upp innovation: Utveckling av anpassade verktyg med TypeScript Compiler API

I den ständigt föränderliga världen av mjukvaruutveckling är effektivitet och precision avgörande. När projekt skalar upp och komplexiteten ökar, blir behovet av skräddarsydda lösningar för att effektivisera arbetsflöden, upprätthålla kodstandarder och automatisera repetitiva uppgifter alltmer kritiskt. Medan TypeScript i sig är ett kraftfullt språk för att bygga robusta och skalbara applikationer, låses dess sanna potential för utveckling av anpassade verktyg upp genom dess sofistikerade TypeScript Compiler API.

Detta blogginlägg kommer att djupdyka i TypeScript Compiler API:s kapacitet och ge utvecklare globalt möjlighet att skapa skräddarsydda verktyg som kan revolutionera deras utvecklingsprocesser. Vi kommer att utforska vad API:et är, varför du bör överväga att använda det, och ge praktiska insikter och exempel för att komma igång med din resa inom utveckling av anpassade verktyg.

Vad är TypeScript Compiler API?

I grunden är TypeScript Compiler API ett programmatiskt gränssnitt som låter dig interagera med TypeScript-kompilatorn själv. Tänk på det som ett sätt att utnyttja samma intelligens som TypeScript använder för att förstå, analysera och transformera din kod, men för dina egna anpassade ändamål.

Kompilatorn fungerar genom att parsa din TypeScript-kod till ett Abstract Syntax Tree (AST). AST:n är en trädliknande representation av din kodes struktur, där varje nod representerar en konstruktion i din kod, såsom en funktionsdeklaration, en variabeltilldelning eller ett uttryck. Compiler API tillhandahåller verktyg för att:

• Parsa TypeScript-kod: Konvertera källfiler till AST:er.
• Gå igenom och analysera AST:er: Navigera genom kodens struktur för att identifiera specifika mönster, syntax eller semantisk information.
• Transformera AST:er: Modifiera, lägga till eller ta bort noder inom en AST för att skriva om kod eller generera ny kod.
• Typkontrollera kod: Förstå typerna och relationerna mellan olika delar av din kodbas.
• Generera kod: Generera JavaScript, deklarationsfiler (.d.ts) eller andra utdataformat från AST:n.

Denna kraftfulla uppsättning funktioner utgör grunden för många befintliga TypeScript-verktyg, inklusive själva TypeScript-kompilatorn, linter som TSLint (nu till stor del ersatt av ESLint med TypeScript-stöd), och IDE-funktioner som kodkomplettering, refaktorering och felmarkering.

Varför utveckla anpassade verktyg med TypeScript Compiler API?

För utvecklingsteam världen över kan införande av anpassade verktyg byggda med Compiler API leda till betydande fördelar:

1. Förbättrad kodkvalitet och konsistens

Olika regioner och team kan ha varierande tolkningar av bästa praxis. Anpassade verktyg kan upprätthålla specifika kodstandarder, mönster och arkitektoniska riktlinjer som är avgörande för din organisations specifika behov. Detta leder till mer underhållbara, läsbara och robusta kodbaser över olika projekt.

2. Ökad utvecklarproduktivitet

Repetitiva uppgifter som att generera boilerplate-kod, migrera kodbaser eller tillämpa komplexa transformationer kan automatiseras. Detta frigör utvecklare att fokusera på kärnlogik och innovation, snarare än på monotont, felbenäget manuellt arbete.

3. Skräddarsydd statisk analys

Medan generiska linter fångar många vanliga problem, kanske de inte adresserar de unika komplexiteterna eller domänspecifika kraven i din applikation. Anpassade statiska analysverktyg kan identifiera och flagga potentiella buggar, prestandahalsar eller säkerhetsbrister som är specifika för ditt projekts arkitektur och affärslogik.

4. Avancerad kodgenerering

API:et möjliggör generering av komplexa kodstrukturer baserat på vissa kriterier. Detta är ovärderligt för att skapa typsäkra API:er, datamodeller eller UI-komponenter från deklarativa definitioner, vilket minskar manuell implementering och potentiella fel.

5. Effektiviserad refaktorering och migrering

Storskaliga refaktoreringsinsatser eller migreringar mellan olika versioner av bibliotek eller ramverk kan vara oerhört utmanande. Anpassade verktyg kan automatisera många av dessa ändringar, säkerställa konsistens och minimera risken för att introducera regressioner.

6. Djupare IDE-integration

Utöver standardfunktionerna möjliggör API:et skapandet av mycket specialiserade IDE-plugins som erbjuder kontextmedveten hjälp, anpassade snabbkorrigeringar och intelligenta kodförslag skräddarsydda för ditt projekts specifika domän.

Kom igång: Kärnkoncepten

För att börja utveckla med TypeScript Compiler API behöver du en gedigen förståelse för några nyckelkoncept:

1. TypeScript-programmet

Ett Program representerar en samling källfiler och kompilatoralternativ som kompileras tillsammans. Det är det centrala objektet du kommer att interagera med för att komma åt semantisk information om hela ditt projekt.

Du kan skapa ett Program så här:

            
import * as ts from 'typescript';

const fileNames: string[] = ['src/index.ts', 'src/utils.ts'];
const compilerOptions: ts.CompilerOptions = {
  target: ts.ScriptTarget.ESNext,
  module: ts.ModuleKind.CommonJS,
};

const program = ts.createProgram(fileNames, compilerOptions);

            

              
                Copy
              
            
          

2. Källfiler och typkontrollant

Från ett Program kan du komma åt enskilda SourceFile-objekt, som representerar den parsade AST:n för varje TypeScript-fil. TypeChecker är en avgörande komponent som tillhandahåller semantisk analysinformation, såsom typslutledning, symbolupplösning och kontroll av typkompatibilitet.

            
const checker = program.getTypeChecker();

program.getSourceFiles().forEach(sourceFile => {
  if (!sourceFile.isDeclarationFile) {
    // Bearbeta denna källfil
    ts.forEachChild(sourceFile, node => {
      // Analysera varje nod
    });
  }
});

            

              
                Copy
              
            
          

3. Traversering av Abstract Syntax Tree (AST)

När du har en SourceFile navigerar du dess AST. Det vanligaste sättet att göra detta är att använda ts.forEachChild(), som rekursivt besöker alla direkta barn till en given nod. För mer komplexa scenarier kan du implementera anpassade besöksmönster eller använda bibliotek som förenklar AST-traversering.

Att förstå de olika SyntaxKinds är avgörande för att identifiera specifika kodstrukturer. Till exempel:

• ts.SyntaxKind.FunctionDeclaration: Representerar en funktionsdeklaration.
• ts.SyntaxKind.Identifier: Representerar ett variabelnamn, funktionsnamn, etc.
• ts.SyntaxKind.PropertyAccessExpression: Representerar en åtkomst till en egenskap (t.ex. obj.prop).

4. Semantisk analys med typkontrollanten

TypeChecker är där den verkliga magin i semantisk förståelse sker. Du kan använda den för att:

• Hämta den symbol som är associerad med en nod (t.ex. funktionen som anropas).
• Bestämma typen av ett uttryck.
• Kontrollera typkompatibilitet.
• Lösa referenser till symboler.

            
// Exempel: Hitta alla funktionsdeklarationer

function findFunctionDeclarations(sourceFile: ts.SourceFile) {
  const functions: ts.FunctionDeclaration[] = [];

  function visit(node: ts.Node) {
    if (ts.isFunctionDeclaration(node)) {
      functions.push(node);
    }
    ts.forEachChild(node, visit);
  }

  visit(sourceFile);
  return functions;
}

            

              
                Copy
              
            
          

5. Kodtransformation

Compiler API låter dig också transformera AST:n. Detta görs med hjälp av funktionen ts.transform(), som tar din AST och en uppsättning besökare som definierar hur noder ska transformeras. Du kan sedan generera den transformerade AST:n tillbaka till kod.

            
import * as ts from 'typescript';

const sourceCode = 'function greet() { console.log("Hello"); }';
const sourceFile = ts.createSourceFile('temp.ts', sourceCode, ts.ScriptTarget.ESNext, true);

const visitor: ts.Visitor = (node) => {
  if (ts.isIdentifier(node) && node.text === 'console') {
    // Ersätt 'console' med 'customLogger'
    return ts.factory.createIdentifier('customLogger');
  }
  return ts.visitEachChild(node, visitor, ts.nullTransformationContext);
};

const transformationResult = ts.transform(sourceFile, [
  (context) => {
    const visitor = (node: ts.Node): ts.Node => {
      if (ts.isIdentifier(node) && node.text === 'console') {
        return ts.factory.createIdentifier('customLogger');
      }
      return ts.visitEachChild(node, visitor, context);
    };
    return visitor;
  }
]);

const printer = ts.createPrinter();
const transformedCode = printer.printFile(transformationResult.transformed[0]);
console.log(transformedCode);
// Utdata: function greet() { customLogger.log("Hello"); }

            

              
                Copy
              
            
          

Praktiska tillämpningar och användningsfall

Låt oss utforska några verkliga scenarier där TypeScript Compiler API briljerar:

1. Upprätthålla namngivningskonventioner

Team kan utveckla verktyg för att upprätthålla konsekventa namngivningskonventioner för variabler, funktioner, klasser och moduler. Detta är särskilt användbart i stora, distribuerade team för att upprätthålla en enhetlig kodbas.

Exempel: Ett verktyg som flaggar alla komponentnamn som inte följer PascalCase-konventionen när de exporteras från en React-modul.

            
// Föreställ dig att detta är en del av en linterregel

function checkComponentName(node: ts.ExportDeclaration, checker: ts.TypeChecker) {
  if (ts.isClassDeclaration(node.exportClause) || ts.isFunctionDeclaration(node.exportClause)) {
    const name = node.exportClause.name;
    if (name && !/^[A-Z]/.test(name.text)) {
      // Rapportera fel: Komponentnamnet måste börja med en stor bokstav
      console.error(`Invalid component name: ${name.text}`);
    }
  }
}

            

              
                Copy
              
            
          

2. Automatiserad kodgenerering för API:er och datamodeller

Om du har ett tydligt API-schema eller en datastrukturdefinition (t.ex. i OpenAPI, GraphQL-schema eller till och med en väldefinierad uppsättning TypeScript-gränssnitt), kan du skriva verktyg för att generera typsäkra klienter, serverstubs eller datavalideringslogik.

Exempel: Generera en uppsättning TypeScript-gränssnitt från en OpenAPI-specifikation för att säkerställa konsistens mellan frontend- och backend-kontrakt.

Detta är en komplex uppgift som involverar parsning av OpenAPI-specifikationen (ofta JSON eller YAML) och sedan användning av Compiler API för att programmatiskt skapa ts.InterfaceDeclaration, ts.TypeAliasDeclaration och andra AST-noder.

3. Förenkling av beroendehantering

Verktyg kan analysera importuttryck för att identifiera oanvända beroenden, föreslå modulvägsalias eller till och med hjälpa till att automatisera uppgraderingar genom att förstå importgrafen.

Exempel: Ett skript som söker efter oanvända importuttryck och erbjuder att ta bort dem automatiskt.

            
// Förenklat exempel på att hitta oanvända importuttryck

function findUnusedImports(sourceFile: ts.SourceFile, program: ts.Program) {
  const checker = program.getTypeChecker();
  const imports: Array<{ node: ts.ImportDeclaration, isUsed: boolean }> = [];

  ts.forEachChild(sourceFile, node => {
    if (ts.isImportDeclaration(node)) {
      imports.push({ node: node, isUsed: false });
    }
  });

  ts.forEachChild(sourceFile, (node) => {
    if (ts.isIdentifier(node)) {
      const symbol = checker.getSymbolAtLocation(node);
      if (symbol) {
        // Kontrollera om denna identifierare är en del av en importerad modul
        // Detta kräver mer sofistikerad symbolupplösningslogik
      }
    }
  });

  // Logik för att markera import som används eller oanvända baserat på symbolupplösning
  return imports.filter(imp => !imp.isUsed).map(imp => imp.node);
}

            

              
                Copy
              
            
          

4. Identifiera och migrera föråldrade API:er

När bibliotek utvecklas, avskriver de ofta äldre API:er. Anpassade verktyg kan systematiskt skanna din kodbas efter användning av dessa föråldrade API:er och automatiskt ersätta dem med deras moderna motsvarigheter, vilket säkerställer att dina projekt förblir uppdaterade.

Exempel: Ersätta alla instanser av ett föråldrat funktionsanrop med ett nytt, eventuellt justera argument.

            
// Exempel: Ersätta en föråldrad funktion

const visitor: ts.Visitor = (node) => {
  if (
    ts.isCallExpression(node) &&
    ts.isIdentifier(node.expression) &&
    node.expression.text === 'oldDeprecatedFunction'
  ) {
    // Konstruera ett nytt CallExpression för den nya funktionen
    const newCall = ts.factory.updateCallExpression(
      node,
      ts.factory.createIdentifier('newModernFunction'),
      node.typeArguments,
      [...node.arguments, ts.factory.createLiteral('migration-tag')] // Lägger till ett nytt argument
    );
    return newCall;
  }
  return ts.visitEachChild(node, visitor, ts.nullTransformationContext);
};

            

              
                Copy
              
            
          

5. Förbättra säkerhetsrevisioner

Anpassade verktyg kan byggas för att identifiera vanliga säkerhetsanti-mönster, såsom osäker direktanvändning av API:er som är benägna att utsättas för injektionsattacker eller felaktig sanering av användarinmatningar.

Exempel: Ett verktyg som flaggar direkt användning av eval() eller andra potentiellt farliga funktioner utan ordentliga saneringskontroller.

6. Transpilering av domänspecifika språk (DSL)

För organisationer som utvecklar sina egna interna DSL:er kan TypeScript Compiler API användas för att transpilera dessa DSL:er till exekverbar TypeScript eller JavaScript, vilket gör att de kan utnyttja TypeScript-ekosystemet.

Bygg ditt första anpassade verktyg

Låt oss skissera stegen för att bygga ett grundläggande anpassat verktyg.

Steg 1: Konfigurera din miljö

Du behöver Node.js och npm (eller Yarn). Installera TypeScript-paketet:

            
npm install -g typescript
# Eller för ett lokalt projekt
npm install --save-dev typescript

            

              
                Copy
              
            
          

Du vill också ha en TypeScript-fil att experimentera med. Skapa till exempel example.ts:

            
function sayHello(name: string): void {
  const message = `Hello, ${name}!`;
  console.log(message);
}

sayHello('World');

            

              
                Copy
              
            
          

Steg 2: Skriv ditt skript

Skapa en ny TypeScript-fil för ditt verktyg, t.ex. analyze.ts.

            
import * as ts from 'typescript';

const fileName = 'example.ts'; // Filen du vill analysera
const compilerOptions: ts.CompilerOptions = {
  target: ts.ScriptTarget.ESNext,
  module: ts.ModuleKind.CommonJS,
};

// 1. Skapa ett program
const program = ts.createProgram([fileName], compilerOptions);

// 2. Hämta SourceFile för din målfil
const sourceFile = program.getSourceFile(fileName);

if (!sourceFile) {
  console.error(`Kunde inte hitta källfil: ${fileName}`);
  process.exit(1);
}

// 3. Gå igenom AST:n för att hitta specifika noder
console.log(`Analyserar fil: ${sourceFile.fileName}\n`);

ts.forEachChild(sourceFile, (node) => {
  // Kontrollera funktionsdeklarationer
  if (ts.isFunctionDeclaration(node) && node.name) {
    console.log(`Hittade funktion: ${node.name.text}`);

    // Kontrollera parametrar
    if (node.parameters.length > 0) {
      console.log(`  Parametrar: ${node.parameters.map(p => p.name.getText()).join(', ')}`);
    }

    // Kontrollera returtypanmärkning
    if (node.type) {
      console.log(`  Returtyp: ${node.type.getText()}`);
    } else {
      console.warn(`  Funktion ${node.name.text} har ingen explicit returtypanmärkning.`);
    }
  }

  // Kontrollera console.log-uttryck
  if (
    ts.isCallExpression(node) &&
    ts.isPropertyAccessExpression(node.expression) &&
    node.expression.name.text === 'log' &&
    ts.isIdentifier(node.expression.expression) &&
    node.expression.expression.text === 'console'
  ) {
    console.log(`  Hittade console.log-uttryck.`);
  }
});
```

tsc analyze.ts

            

              
                Copy
              
            
          

            
node analyze.js

            

              
                Copy
              
            
          

            
Analyserar fil: example.ts

Hittade funktion: sayHello
  Parametrar: name
  Returtyp: void
  Hittade console.log-uttryck.

            

              
                Copy
              
            
          

            
import { Project } from 'ts-morph';

const project = new Project();
project.addSourceFileAtPath('example.ts');

const sourceFile = project.getSourceFileOrThrow('example.ts');

// Lägg till en ny parameter till funktionen sayHello
sourceFile.getFunctionOrThrow('sayHello').addParameter({ name: 'greeting', type: 'string' });

// Lägg till ett nytt console.log-uttryck
sourceFile.addStatements('console.log(\'Migration complete!\');');

// Spara ändringarna tillbaka till filen
project.saveSync();

console.log('Filen har modifierats framgångsrikt!');

            

              
                Copy